<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        var feature = new ol.Feature({

            geometry: new ol.geom.Point(ol.proj.fromLonLat([120.220, 30.1735], 'EPSG:4326','EPSG:3857'))
        })
        //设置这个点的样式
        feature.setStyle(new ol.style.Style({
            image: new ol.style.RegularShape({
                points: 4,
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })

            })
        }))
        var pointLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature]
            })
        })

        var rootLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
      })
    });


        var map = new ol.Map({
            layers: [rootLayer,pointLayer],
            view: new ol.View({
                center: [120.220, 30.1735],
                projection: 'EPSG:4326',
                zoom: 5
            }),
            target: 'map'
        })



    </script>
</body>

</html>